<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<div contenteditable>
    <span id="sample" style="color: red;">abfg</span>
    <div id="sample">cde</div>
</div>
<script>
test(() => {
    assert_not_equals(window.internals, undefined,
        'This test requires clipboard access from JavaScript.');

    assert_selection(
        [
            '<div contenteditable>',
                '<span style="color: red;">ab|fg</span>',
            '</div>',
        ].join(''),
        selection => {
            selection.setClipboardData('CDE');
            selection.document.execCommand('paste');
        },
        [
            '<div contenteditable>',
                '<span style="color: red;">ab</span>',
                'CDE|',
                '<span style="color: red;">fg</span>',
            '</div>',
        ].join(''),
        'Paste into middle of colored SPAN');

    assert_selection(
        [
            '<div contenteditable>',
                // TDOO(yosin): Once we stop normalize selection, we should get
                // rid of "x". Until then, we need to have "x" to place caret.
                '<div style="margin-left: 40px; text-indent: -40px;">x|</div>',
            '</div>',
        ].join(''),
        selection => {
            selection.setClipboardData('<span style="margin-left: 40px; text-indent: -40px;">foo</span>');
            selection.document.execCommand('paste');
        },
        [
            '<div contenteditable>',
                '<div style="margin-left: 40px; text-indent: -40px;">xfoo|</div>',
            '</div>',
        ].join(''),
        'Keep text-indent at pasting');
});
</script>
